<template>
  <span>{{ result }}</span>
</template>

<script>
export default {
  name: 'number',
  props: {
    值: {
      type: [Number, String],
      default: function () {
        return 0;
      },
    },
    方向: {
      type: [String],
      validator: function (val) {
        return ['ltr', 'rtl'].includes(val);
      },
      default: function () {
        return 'ltr';
      },
    },
    每隔几位: {
      type: Number,
      validator: function (val) {
        return val >= 2;
      },
      default: function () {
        return 0;
      },
    },
    分隔符: {
      type: String,
      validator: function (val) {
        return [' ', ',', '-', '_'].includes(val);
      },
      default: function () {
        return ',';
      },
    },
  },
  computed: {
    result: function () {
      let arr = this.值.split('');
      let per = this.每隔几位;
      let spe = this.分隔符;
      if (this.方向 == 'ltr') {
        return arr.reduce((t, v, i, a) => {
          let str = '';
          if (i % per == per - 1 && i != a.length - 1) {
            str = v + spe;
          } else {
            str = v;
          }
          return (t = t + str);
        }, '');
      } else {
        return arr.reduceRight((t, v, i, a) => {
          let str = '';
          let idx = a.length - 1 - i;
          if (idx % per == per - 1 && idx != a.length - 1) {
            str = spe + v;
          } else {
            str = v;
          }
          return (t = str + t);
        }, '');
      }
    },
  },
  data() {
    return {};
  },
};
</script>

<style>
</style>